iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
1
Mobile Development

Android 開發經驗三十天系列 第 2

[Android開發經驗三十天]Day2一Drawable相關筆記

  • 分享至 

  • xImage
  •  

今天來介紹一下 drawable裡面會用到的東西

tags: 鐵人賽

常見drawable內屬性

Drawable是可以被繪製到屏幕上,可以用getDrawable(int) 拿取屬性。
官方文檔

1. layer-list

官方文檔

(1) 介紹

作用 : 用來創建具有圖層概念的drawable
原理 : 可以想成像FrameLayout一樣是一層層疊上去的
為何要用? : 最常用是來做陰影 or 給框框單一邊線
#預設情況layer-list中的所有Drawable都會被縮放至View的大小
注: 如果要做單一線其實也可以用
如果要畫一圈的線 drawable內的stroke

**默認情況下,所有東西都會自動縮放以適應父視圖(View)大小,如果你不想讓他縮放,要記得加 android:gravity="center" **

View Example :

<View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@color/black" />

drawable - stroke 畫個正方形button

<?xml version="1.0" encoding="utf-8"?>
<!-- shape不宣告就是正方形 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#FFFFFF" />

    <stroke
        android:width="1dp"
        android:color="#CCCCCC" />
  
</shape>

Q:那要怎麼樣才能做出來陰影呢?

總共有兩層,第一層是底層,第二層是上面那層,第一層因為要做出陰影所以要靠右下,第二層要靠左上。

?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:left="3dp"
        android:top="3dp">
        <shape>
            <solid android:color="#b4b5b6"/>
        </shape>
    </item>

    <item android:bottom="3dp"
        android:right="3dp">
        <shape>
            <solid android:color="#9C27B0"/>
        </shape>
    </item>
</layer-list>

Q:要怎麼做出線的感覺?

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape>
            <solid android:color="#E784E7"/>
        </shape>
    </item>

    <item
        android:bottom="5dp" android:left="2dp" android:right="2dp">
        <shape>
            <solid android:color="#b4b5b6"/>
        </shape>
    </item>
</layer-list>

Q:旋轉?

可以用rotate屬性讓他轉 fromDegrees是從幾度開始
正的是x軸下方 負的是x軸上方
pivotX pivotY是縮放/旋轉起點座標

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:left="3dp"
        android:top="3dp">
        <rotate android:fromDegrees="-30" android:pivotX="0"
            android:pivotY="0">
            <shape>
                <solid android:color="#b4b5b6"/>
            </shape>
        </rotate>

    </item>

    <item android:bottom="3dp"
        android:right="3dp">
        <rotate android:fromDegrees="30" android:pivotX="0"
            android:pivotY="0">
            <shape>
                <solid android:color="#9C27B0"/>
            </shape>
        </rotate>
    </item>
</layer-list>

2. shape

  1. shape 表示形狀 rectangle矩形 oval橢圓 line 線 ring 環狀
  2. corner radius表示圓滑的程度 數值越大越圓
    3.gradient 漸層色 angle表示漸層的角度
    type表示漸層類型 ["linear" 線性 | "radial" 環狀 | "sweep" 掃描]
    4.solid 是純色的
    5.stroke代表邊框 dash是虛線相關的 Width 是大小 Gap 是隔開的距離
<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="integer"
        android:centerY="integer"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:usesLevel=["true" | "false"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>
題外話:

getIntrinsicWidth getIntrinsicHeight 可以拿到drawable的真實寬跟高

舉個例子,要是你drawable bitmap其實是100*100 getIntrinsicWidth拿到的就是 100
但是在imageView你設置的寬高是200 * 200 getWidth拿到的就是200

參考stackoverflow

3. Bitmap

png (preferred), .jpg (acceptable), .gif (discouraged).
用途 : 放圖片,做圖片處理

  1. android:antialias 圖片變平滑一點
  2. android:dither 保持圖片不過於失真,有些使用在不同設備圖片會拉伸,有可能就會失真,在某些情況下,設備的像素深度很低,可能會導致視覺條紋和抖動問題。
    3.android:filter 濾波也是平滑用的
    4.android:tileMode 這個屬性有點有趣
    有 mirror,repeat,clamp,disabled
    mirror : 會像照鏡子那樣
    repeat : 瘋狂重複
    clamp:這種情況下將一個View的background 設置成該bitmap, 最終也只會顯示bitmap自身的大小 (其實這個View的尺寸是佔滿了的 );
    disabled:禁用,跟不設置是一樣的
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
     android:src="@drawable/ic_launcher_foreground"
    android:antialias="true"
    android:tileMode="clamp"
      android:dither="true"
    android:filter="true"
    android:gravity="center">

</bitmap>

4. StateList

用途:透過selector可以定義不同狀態下的跟UI相關的改變
常用在: RadioGroup selector or Button
他搜尋的順序是一個一個往下找,所以要考慮情況做順序上的調整
定義?
android:state_pressed 物件被按下時
android:state_focused 物件由軌跡球選取時
android:state_hovered 物件由指標覆蓋時
android:state_selected 物件被選取時
android:state_checkable 物件是checkable時
android:state_checked 物件被點選時
android:state_enabled 物件能夠接收touch/click event時
android:state_activated 物件被持續選擇時
android:state_window_focused 當物件所屬的application在前景時

參考情境

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <color android:color="#673AB7"/></item>
    <item android:state_pressed="true"
        >
    <color android:color="@color/colorAccent"/>
    </item>
    <item android:state_focused="true"
        >
        <color android:color="@color/colorPrimaryDark"/>
    </item> <!-- focused -->
    <item android:state_hovered="true"
        >
        <color android:color="@color/colorPrimary"/></item>
    <item >
        <color android:color="#FFEB3B"/></item>
</selector>

5.Nine-Patch

用途: 一個可以自適應的的格式
官方文檔案解釋 :
A NinePatch是一種PNG圖片,您可以在其中定義當View中的內容超出正常圖片範圍時Android縮放的可拉伸區域。通常,您將這種類型的圖像分配為View的背景,該View的至少一個維度設置為"wrap_content",並且當View增長以容納內容時,也會縮放Nine-Patch圖像以匹配View的大小。九補丁圖像的一個示例用法是Android標準Button小部件使用的背景,該背景必須伸展以容納按鈕內的文本(或圖像)。


上一篇
[Android 開發經驗三十天+Spring Boot後端]#D1一自我介紹+目標
下一篇
[Android開發經驗三十天]Day3一用Drawable相關知識自定義ProgressBar!
系列文
Android 開發經驗三十天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言